<template>
    <div class="person">
        <h2>姓名：{{ name }}</h2>
        <h2>年龄：{{ age }}</h2>
        <button @click="changeName">修改姓名</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showPos">查看位置</button>
    </div>
</template>

<!-- <script lang="ts">
/* 这是 setup 常规用法 */
    export default {
        name: 'Person', 
        setup(){    
            // data
            let name = 'zzq'
            let age = 28
            let position = 'PF'
            

            // methods
            function changeName(){
                name = 'zm'
            }
            function changeAge(){
                age--
            }
            function showPos(){
                alert(position)
            }

            // setup 的返回值。将定义的所有内容返回出去，就可以在 template 中直接使用
            return {name, age, position, showPos, changeAge, changeName}
        }
    }
</script> -->

<!-- <script lang="ts">
/* 以前可以使用两个 script 标签，一个设置组件名 name，一个使用 setup 语法糖，但是现在似乎不行了，这么写的话设置组件名的 script 标签会飘红 */
    export default{
        name: 'Person'
    }
</script> -->

<!-- 在使用  npm install vite-plugin-vue-setup-extend -D 安装插件后， 才可以使用 <script setup lang="ts" name="Persona"> 的写法来指定 name -->

<script setup lang="ts" name="Persona">
/* 这是 setup 语法糖，省略了 setup 函数和返回值的书写 */
    // data
    let name = 'zzq';
    let age = 28;
    let position = 'PF';

    // methods
    function changeName() {
        name = 'zm';
    }
    function changeAge() {
        age--;
    }
    function showPos() {
        alert(position);
    }
</script>

<style scoped>
.person {
    background-color: #d8a7af;
    border-radius: 10px;
    box-shadow: 0 0 10px;
    padding: 20px;
    margin: 10px 0;
}
</style>
